var canvas,
 context,
 canvasWidth = 490,
 canvasHeight = 220,
 images = {},
 frameInterval,
 fps = 30,
 drawing = false,
 fpsInterval,
 numFramesDrawn = 0,
 curFPS = 0,
 level = 1,
 maxLevel = 6,
 speed = 2,
 curLoadResNum = 0,
 totalLoadResources = 1,
 displayList = [],
 ball,
 hero,
 background;
 
Ball = function() {
 
 var x = 0,
 y = 0,
 speed = 0, 
 direction = 1, 
 rollTimer, 
 dirty = false, 
 diameter = 20, 
 color = "#DD3333",
 highlightColor = "#fa6565";
 
 rollTimer = setInterval(updateRoll, 1000/25);
 
 function roll(pSpeed, pDirection){
 speed = pSpeed;
 if(pDirection){
 direction = pDirection;
 }
 
 }
 function stop() {
 speed = 0;
 }
 function updateRoll() {
 x += direction * speed;
 }
 function draw(context) {
 
 var centerX = x,
 centerY = y + (diameter + 10)/2 - 2,
 width = (diameter + 30),
 height = 6;
 
 context.beginPath();
 context.moveTo(centerX, centerY);
 context.bezierCurveTo(centerX-width/2,centerY-height/2,
   centerX-width/2,centerY+height/2,
   centerX,centerY+height/2);
 context.bezierCurveTo(centerX+width/2,centerY+height/2,
   centerX+width/2,centerY-height/2,
   centerX,centerY-height/2);
 context.fillStyle = "#000000";
 context.fill();
 context.closePath();
 
 context.beginPath();
 context.moveTo(x, y - (diameter + 10)/2);
 context.arc(x,y,(diameter + 10)/2,0,2*Math.PI,false);
 context.fillStyle = "#000000";
 context.fill();
 context.closePath();
 
 context.beginPath();
 context.moveTo(x, y - diameter/2);
 context.arc(x,y,diameter/2,0,2*Math.PI,false);
 context.fillStyle = color;
 context.fill();
 context.closePath();
 
 centerX = x + 3;
 centerY = y - 3;
 context.beginPath();
 context.moveTo(centerX, centerY);
 context.arc(centerX,centerY,diameter/3/2,0,2*Math.PI,false);
 context.fillStyle = highlightColor;
 context.fill();
 context.closePath();
 }
 function getX(){
 return x; 
 }
 function setX(pX){
 x = pX; 
 }
 function getY(){
 return y; 
 }
 function setY(pY){
 y = pY; 
 }
 return {
 getX:getX,
 setX:setX,
 getY:getY,
 setY:setY,
 roll:roll,
 draw:draw,
 stop:stop
 };
 };
 
function throwBall() { 
 ball.roll(speed, -1);
}

function start() {
 frameInterval = setInterval(update, 1000/fps);
 fpsInterval = setInterval(updateFPS, 1000);
}

function prepareCanvas(gameDiv, pCanvasWidth, pCanvasHeight) {
 
 canvasWidth = pCanvasWidth;
 canvasHeight = pCanvasHeight;
 
 // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
 canvas = document.createElement('canvas');
 canvas.setAttribute('width', canvasWidth);
 canvas.setAttribute('height', canvasHeight);
 canvas.setAttribute('id', 'canvas');
 gameDiv.appendChild(canvas);
 
 /*if(typeof G_vmlCanvasManager != 'undefined') {
 canvas = G_vmlCanvasManager.initElement(canvas);
 }*/
 context = canvas.getContext("2d"); // Grab the 2d canvas context
 // Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
 //     context = document.getElementById('canvas').getContext("2d");

 start();

 ball = new Ball();
 ball.setX(canvasWidth);
 ball.setY(200);
 ball.roll(speed, -1);
 displayList.push(ball);
}

function clearCanvas() {
 canvas.width = canvas.width; // clears the canvas 
}

function update() {
 
 ++numFramesDrawn;

  if(ball.getX() < 0) {
 
 speed = (Math.random() * 5);
 level += 1;

 ball.stop();
 ball.setX(canvasWidth + 20);
 setTimeout(throwBall, Math.random() * 3000);
 } 
 else {
 ball.roll(speed, -1);
 }
 redraw(); 
}

function redraw() {
 
 var i;
 
 clearCanvas();
 
 for(i = 0; i < displayList.length; i++)
 {
 displayList[i].draw(context); 
 }
 
 try {
 
 } catch (ex) {
 
 }
 
}
function updateFPS()
{
 curFPS = numFramesDrawn;
 numFramesDrawn = 0;
}